<template>
  <div>
    <div class="section b-cells">
      <div class="section-header">
        <div
          class="section-mark"
          style="border-left-color: rgb(35, 98, 251)"
        ></div>
        <div class="section-title">{{ $t('customer.baseInformation') }}</div>
      </div>
      <div class="content" style="height: auto">
        <!---->
        <el-form ref="form" label-width="100px" label-position="left">
          <div style="display: flex">
            <el-form-item :label="$t('customer.customerName')">
              <span>{{ row.name }}</span>
            </el-form-item>
            <el-form-item :label="$t('customer.companyPhone')">
              <span>{{
                row.companyTel ? row.companyTel : $t('customer.empty')
              }}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item :label="$t('customer.office')">
              <span>{{
                row.jobTitle ? row.jobTitle : $t('customer.empty')
              }}</span>
            </el-form-item>
            <el-form-item :label="$t('customer.linkinUrl')">
              <span>{{
                row.linkedinUrl ? row.linkedinUrl : $t('customer.empty')
              }}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item :label="$t('customer.phone')">
              <span>{{ row.mobile ? row.mobile : $t('customer.empty') }}</span>
            </el-form-item>
            <el-form-item :label="$t('common.email')">
              <span>{{ row.email }}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item :label="$t('customer.customerType')">
              <span>{{ getType(row.type) }}</span>
            </el-form-item>
            <el-form-item :label="$t('route.CustomerGroupListIndex')">
              <span>{{ row.groupId ? row.group.name : '未分组' }}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item :label="$t('route.CustomerSourceListIndex')">
              <span>{{
                row.source ? row.source.name : $t('customer.empty')
              }}</span>
            </el-form-item>
            <el-form-item :label="$t('common.tag')">
              <template v-if="JSON.stringify(row.labels) != '[]'">
                <template v-for="(v, k) in row.labels">
                  <el-tag
                    :style="{
                      'background-color': v.color,
                      'border-color': v.color,
                      'margin-right': '5px',
                    }"
                    size="mini"
                    effect="dark"
                  >
                    {{ v.name }}
                  </el-tag>
                </template>
              </template>
              <template v-else>{{ $t('customer.empty') }}</template>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item :label="$t('common.remark')">
              <span>{{
                row.remarks ? row.remarks : $t('customer.empty')
              }}</span>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="section-header">
        <div
          class="section-mark"
          style="border-left-color: rgb(35, 98, 251)"
        ></div>
        <div class="section-title">{{ $t('customer.systemInformation') }}</div>
      </div>
      <div class="content" style="height: auto">
        <el-form ref="form" label-width="100px" label-position="left">
          <div style="display: flex">
            <el-form-item :label="$t('customer.principal')">
              <span>{{
                row.belongUser ? row.belongUser.trueName : $t('customer.empty')
              }}</span>
            </el-form-item>
            <el-form-item :label="$t('customer.latestFollowUp')">
              <span style="word-wrap: break-word; word-break: break-all">{{
                row.followMessage ? row.followMessage : $t('customer.empty')
              }}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item :label="$t('customer.founder')">
              <span>{{
                row.user ? row.user.trueName : $t('customer.empty')
              }}</span>
            </el-form-item>
            <el-form-item :label="$t('common.createTime')">
              <span>{{ row.createdAt }}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item :label="$t('common.updateTime')">
              <span>{{ row.updatedAt }}</span>
            </el-form-item>
            <el-form-item :label="$t('customer.latestFollowUpTime')">
              <span>{{
                row.followAt ? row.followAt : $t('customer.empty')
              }}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item :label="$t('customer.principalGetCustomerTime')">
              <span>{{ row.belongAt }}</span>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'info',
  props: {
    row: '',
  },
  methods: {
    getType(type) {
      let arr = [
        '',
        this.$t('route.dataSearch'),
        this.$t('customer.dataMarketing'),
        this.$t('customer.externalImport'),
      ]
      return arr[type]
    },
  },
}
</script>

<style scoped>
.b-cells {
  position: relative;
  padding: 15px;
  height: 100%;
  overflow-y: auto;
  overflow-y: overlay;
}

.section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 15px;
}

.section-mark {
  border-left-width: 4px;
  border-left-style: solid;
  height: 14px;
  border-radius: 2px;
}

.section-title {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  margin-left: 8px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.content /deep/ .el-form {
  margin: 5px 25px 0;
}

.content /deep/ .el-form-item__label {
  color: #777;
}

.content /deep/ .el-form-item {
  width: 50%;
}

.content /deep/ .el-form {
}
</style>
